<template>
  <div class="user_select">
    <div class="search">
      <el-input
        v-model="searchVal"
        placeholder="请输入人员姓名"
        prefix-icon="el-icon-search"
        :autofocus="true"
        size="small"
        class="search_input"
      ></el-input>
    </div>

    <div class="user_block">
      <el-checkbox-group v-model="myCheckList" @change="handleChange">
        <ul v-for="(item, index) in users" :key="index">
          <li>
            <el-checkbox :label="item.id">{{item.name}} ({{item.userName}})</el-checkbox>
          </li>
        </ul>
      </el-checkbox-group>
    </div>
    

    <div class="selected_user">
      <el-tag
        v-for="(item, index) in tempUsers"
        :key="index"
        closable
        @close="reduceTag(index)"
        class="tag"
      >{{item.name}}</el-tag>
    </div>

    <el-pagination
      style="margin: 5px 0;"
      background
      layout="prev, pager, next"
      :current-page="current"
      :page-size="size"
      :total="total"
      :hide-on-single-page="true"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>
<script>
import httpSer from "@/http";
export default {
  props: {
    roleId: {
      type: String,
      default: '1181464216098000897'
    },
    checkList: Array,
    isSingle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      searchVal: "",
      myCheckList: [],
      users: [],
      seachTimer: null,
      size: 20,
      total: 0,
      current: 1,
      tempUsers: []
    };
  },
  watch: {
    searchVal(newVal, oldVal) {
      //限制搜索输入回调
      clearTimeout(this.seachTimer);
      this.seachTimer = setTimeout(() => {
        this.current = 1
        this.getUsers()
      }, 300);
    },
    myCheckList(newList, oldList){
      if (this.isSingle) {
        if (newList.length > 1) {
          return;
        }
      }
      //增加数组时
      if(newList.length > oldList.length){
        let id = newList[newList.length - 1]
        let user = this.users.find(item => {
          return item.id === id
        })
        this.tempUsers.push(user)
      //减少数组时
      }else if(newList.length < oldList.length){
        let user = oldList.find(item => {
          let flag = true
          newList.forEach(val => {
            if(item === val){
              flag = false
            }
          })
          return flag
        })
        let index = this.tempUsers.findIndex(item => {
          return item.id == user.id
        })
        this.tempUsers.splice(index, 1)
      }
    }
  },
  created() {
    //初始化tempUsers和myCheckList
    this.tempUsers = this.initTempUsers(this.checkList)
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      let url = "/userInfo/pageUserByRole";
      let _data = {
        roleId: this.roleId,
        name: this.searchVal,
        size: this.size,
        current: this.current
      };
      httpSer.post(url, _data).then(res => {
        let users = res
        this.users = users.records;

        this.total = users.total * 1;
        this.current = users.current * 1;
      });
    },
    //每次选择或者取消人员通知changeCheckList
    handleChange() {
      console.log(this.isSingle);
      if (this.isSingle) {
        if (this.myCheckList.length > 1) {
          this.myCheckList.pop();
          this.$message.warning("只能选择一个审批人员");
          return;
        }
      }
      this.$emit("changeCheckList", this.tempUsers);
    },
    //减少是时同步减少tempUsers和myCheckList
    reduceTag(index){
      let user = this.tempUsers[index]
      this.tempUsers.splice(index, 1)
      let userIndex = this.myCheckList.findIndex(item => {
        return user.id === item
      })
      if(userIndex !== -1){
        this.myCheckList.splice(userIndex, 1)
      }
    },
    pageChange(current) {
      this.current = current * 1;
      this.getUsers();
    },
    initTempUsers(checkList){
      checkList.forEach(item => {
        this.myCheckList.push(item.id)
      })
      return checkList
    }
  },
  components: {}
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>
